<template>
  <div class="img-con">
     <h3>{{info.title}}</h3>
      <div class="info-tip">
        <span>更新时间：{{info.pubdate |formatDate}}</span>
        <span>点击：{{info.click}}</span>
      </div>
     <hr/>      
  <vue-preview :slides="slide1" @close="handleClose"></vue-preview>
     <div class="container" v-html="info.body"></div>
     <hr>
      <comments :id="this.id" :arctit="this.info.title"></comments>
  </div>
</template>

<script>
import comments from './comments.vue'
export default {
  data() {
    return {
     id:this.$route.params.id,
     info:{},
     slide1:[],
     previewlist:[],

    };
  },
  mounted: function() {
  },
  methods: {
    getarc(){
      this.$http.get("http://192.168.0.104/linshi/api/get_imgarc.php?id=" +this.id).then((res) => {
       if(res.status ==200){
         this.info=res.body;
          res.body.imgurl.forEach((item,index) => {
            var obj={}; 
            obj.src=item;
           obj.msrc=item;
           obj.w=600;
           obj.h=400;
            this.slide1.push(obj)
          });
          this.slide1.forEach((item,index)=>{
            let img = new Image();
            img.src = item.src;
            var timer=null;
            timer=setInterval(()=>{
              if(img.complete){
                clearInterval(timer);
                item.w = parseInt(img.width)
                item.h = parseInt(img.height)
              }
            },80)
          })


        console.log(this.slide1)
       }
      });   
    },
    handleClose () {
        console.log('close event')
      }
    },
  components: {
        comments
  },
  created() {
   this.getarc()
    this.$emit("changTit",true,'图片详情');
  }
};
</script>

<style lang="scss">
 .img-con{
   padding: 10px;
   hr{margin: 5px}
   .info-tip{font-size: 12px;color: #ccc;display: flex;justify-content: space-between;margin-top: 10px}
 }
  .my-gallery{
    display: flex; flex-wrap: wrap;
    figure{
     padding: 0px; margin: 1%;
      img{width: 65px;height: 65px;}
    }
  }

   
</style>
